<template>
    <div class="forget">
        <el-container>
            <el-header class="ft-head">
                <div class="head-show display-flex-between">
                    <div class="log">
                        <span v-if="resetState" class="title">忘记密码</span>
                        <span v-else class="title">重置成功</span>
                    </div>
                    <div class="has-account" @click="goLogin">
                        <span v-show="resetState">想起来了?</span>
                        <span class="tips">去登录</span>
                    </div>
                </div>
            </el-header>
            <el-main>
                <div class="login-box">
                    <div class="login-head display-flex-between">
                        <div class="tips">忘记密码<span v-show="false" class="english">FORGET ZHE PASSWORD</span></div>
                    </div>
                </div>
                <div class="login-input">
                    <!--重置密码-->
                    <div v-if="resetState">
                        <el-form class="demo-ruleForm" :model="loginData" :rules="loginDataRules" ref="loginData"
                                 label-width="100px">
                            <el-form-item label="手机号:" prop="phone">
                                <el-input v-model="loginData.phone" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="验证码:" prop="code">
                                <el-input
                                        v-model="loginData.code"
                                        :disabled="isPhoneNum"
                                        clearable
                                />
                                <el-button
                                        v-if="countTimeStates"
                                        class="get-code-button"
                                        type="primary"
                                        @click="getCode"
                                        size="mini"
                                >
                                    获取验证码
                                </el-button>
                                <el-button v-else class="get-code-button" type="primary"
                                           :class="{adcolor:!countTimeStates}" disabled>{{countTime}}秒后获取
                                </el-button>
                            </el-form-item>
                            <el-form-item label="新密码" prop="pass">
                                <el-input type="password" v-model="loginData.pass" clearable :maxlength="18"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="checkPass">
                                <el-input type="password" v-model="loginData.checkPass" clearable
                                          :maxlength="18"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-button
                                        class="no-radio"
                                        type="primary"
                                        @click="reset('loginData')"
                                >
                                    下一步
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!--去登陆-->
                    <div v-else class="to-login">
                        <p>重置成功</p>
                        <p class="cur">请您牢记密码，勿将密码告知他人使用</p>
                        <el-button class="login-radio" type="primary" @click="goLogin">去登录</el-button>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { phoneNumber } from "@/utils/validate";
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("ddmg/register");
import * as CryptoJS from "crypto-js";

export default {
  name: "forgetPwd",
  data() {
    //验证密码不能为空
    var pass = (rule, value, callback) => {
      if (value === "" || value.length < 6) {
        callback(new Error("请输入6-16位密码"));
      } else {
        if (this.loginData.checkPass !== "") {
          this.$refs.loginData.validateField("checkPass");
        }
        callback();
      }
    };
    var checkPass = (rule, value, callback) => {
      if (value === "" || value.length < 6) {
        callback(new Error("请输入6-16位密码"));
      } else if (value !== this.loginData.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      isPhoneNum: true,
      resetState: true, //重置状态
      countTime: 60, //定时
      countTimeStates: true, //定时状态
      loginData: {
        phone: "",
        code: "",
        pass: "",
        checkPass: ""
      },
      loginDataRules: {
        phone: [{ required: true, validator: phoneNumber, trigger: "blur" }],
        code: [
          {
            required: true,
            min: 6,
            max: 6,
            message: "请输入6位验证码",
            trigger: "blur"
          }
        ],
        pass: [
          { required: true, min: 6, max: 16, validator: pass, trigger: "blur" }
        ],
        checkPass: [
          {
            required: true,
            min: 6,
            max: 16,
            validator: checkPass,
            trigger: "blur"
          }
        ]
      },
      fileArr: {}
    };
  },
  methods: {
    ...mapActions(["getCodeForRetPwd", "updateForRetPwd"]),
    //登录
    goLogin() {
      this.$router.push({ path: "/login" });
    },
    //重置密码
    reset(loginData) {
      this.$refs[loginData].validate(valid => {
        if (valid) {
          this.fileArr.phone = this.loginData.phone;
          this.fileArr.code = this.loginData.code;
          this.fileArr.pass = CryptoJS.MD5(this.loginData.pass).toString();
          this.fileArr.checkPass = CryptoJS.MD5(this.loginData.checkPass).toString();
          this.updateForRetPwd(this.fileArr).then(res => {
            if (res.code === 200) {
              this.resetState = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    //定时器
    reduceTime() {
      var reduceSet = setInterval(() => {
        this.countTime -= 1;
        if (this.countTime == 0) {
          this.countTimeStates = !this.countTimeStates;
          this.countTime = 60;
          clearInterval(reduceSet);
        }
      }, 1000);
    },
    //获取验证码
    getCode() {
      var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
      if (!reg.test(this.loginData.phone)) {
        this.$message({
          type: "error",
          center: true,
          duration: 1000,
          message: "请输入正确11位手机号"
        });
      } else {
        this.isPhoneNum = !this.isPhoneNum;
        this.getCodeForRetPwd(this.loginData.phone).then(res => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              center: true,
              message: "验证码发送成功!"
            });
            this.codeIn = true;
            this.reduceTime();
            this.countTimeStates = !this.countTimeStates;
          }
        });
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.forget {
  width: 100%;
  .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
  }
  /*head*/
  .ft-head {
    width: 100%;
    box-shadow: 4px 4px 2px #e5e5e5;
  }
  .display-flex-between {
    display: flex;
    justify-content: space-between;
  }
  .head-show {
    height: 60px;
    margin: 0 auto;
    line-height: 60px;
    .log {
      height: 60px;
      background: url(../../assets/images/logo_main.png) no-repeat 0 center;
      background-size: 150px 40px;
      .title {
        display: inline-block;
        line-height: 60px;
        font-size: 18px;
        color: #333333;
        margin-left: 158px;
      }
    }
    .has-account {
      cursor: pointer;
      font-size: 14px;
      color: #a9a9a9;
      .tips {
        margin-left: 16px;
        color: #f56a00;
        .right {
          font-size: 20px;
          margin-left: 8px;
        }
      }
    }
  }
  /*body*/
  .el-main {
    min-height: 500px;
    padding: 0 20px !important;
    .login-box {
      max-width: 1200px;
      margin: 0 auto;
      height: 80px;
      border-bottom: 1px dashed #ccc;
      .tips {
        position: relative;
        padding: 30px 0 0 10px;
        font-size: 18px;
        color: #333;
        .english {
          margin-left: 8px;
          font-size: 14px;
          color: #ccc;
        }
      }
      .tips:before {
        content: "";
        display: table;
        width: 2px;
        height: 20px;
        background: #0886ea;
        position: absolute;
        top: 30px;
        left: 0;
        z-index: 1;
      }
    }
    .login-input {
      min-height: 500px;
      max-width: 1000px;
      box-sizing: border-box;
      margin: 80px auto 0 auto;
      .to-login {
        padding-top: 140px;
        background: url(../../assets/images/forsuccess.png) no-repeat center
          10px;
        background-size: 107px 110px;
        text-align: center;
        p {
          margin: 8px 0;
          font-size: 14px;
          font-weight: bold;
          color: #404040;
        }
        .cur {
          font-weight: 400;
          color: #d2d2d2;
        }
        .login-radio {
          margin-top: 16px;
          width: 140px;
        }
      }
      .el-row {
        width: 100%;
      }
      .el-form {
        max-width: 600px;
        margin: 0 auto;
      }
      .el-input {
        width: 70%;
      }
      .get-code-button {
        margin-left: 16px;
      }
      .no-radio {
        width: 70%;
        margin-left: 0;
      }
    }
  }
}
</style>
